<template>
    <div class="text">
        <head-top></head-top>
        <!-- 查询的搜索框 -->
        <div class="demo">
            <el-form :inline="true" :model="courseType" class="demo-form-inline">
                <el-form :inline="true" :model="courseType" class="demo-form-inline">
                    <span class="demonstration">根据题目查询</span>
                    <el-input v-model="courseType.input" placeholder="请输入内容" class="input"></el-input>
                    <span class="demonstration">请选择查询条件</span>
                    <el-cascader :options="courseType.options" :props="{ checkStrictly: true }" clearable></el-cascader>
                    <el-form-item label="题型" class="tixing">
                        <el-select v-model="courseType.text" placeholder="请选择对应的题型" onchange="getpage()">
                            <el-option label="选择题" value="xuanze"></el-option>
                            <el-option label="填空题" value="tiankong"></el-option>
                            <el-option label="判断题" value="pandaun"></el-option>
                            <el-option label="简答题" value="jianda"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="select">
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                    <!-- 一键添加的按钮 -->
                    <div class="button">
                        <el-button type="primary" round @click="addtext">添加习题</el-button>
                    </div>
                </el-form>
            </el-form>
        </div>
        <!-- 习题列表表格:题目、答案、题型、所属课程 -->
        <div class="table">
            <template>
                <el-table :data="tableData">
                    <el-table-column label="题目" width="350">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top">
                                <p>题目: {{ scope.row.name }}</p>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag size="medium">{{ scope.row.name }}</el-tag>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column label="题型" width="130">
                        <template slot-scope="scope">
                            <!-- <i class="el-icon-time"></i> -->
                            <span>{{ scope.row.kind }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="所属类" width="130">
                        <template slot-scope="scope">
                            <!-- <i class="el-icon-time"></i> -->
                            <span class="center">{{ scope.row.lei }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="所属课程" width="130">
                        <template slot-scope="scope">
                            <!-- <i class="el-icon-time"></i> -->
                            <span class="center">{{ scope.row.data }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="详情解析" width="150">
                        <template slot-scope="scope">
                            <el-button type="text" @click="openTextanswer(scope.row)" slot="reference"
                                class="answer">查看</el-button>
                            <el-dialog title="答案框" :visible.sync="textanswer" width="100">
                                <div class="edit_container1">
                                    <quill-editor v-model="currentTextanswer.name" ref="myQuillEditor" 
                                        :options="editorOption" >
                                    </quill-editor>
                                    <quill-editor v-model="currentTextanswer.answer" ref="myQuillEditor"
                                        :options="editorOption" >
                                    </quill-editor>
                                </div>
                            </el-dialog>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            <el-button size="mini" @click="open(scope.$index, scope.row)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </div>
        <!-- 分页查询 -->
        <el-pagination background layout="prev, pager, next" :total="1000">
        </el-pagination>
        <!-- 编辑习题 -->
        <el-dialog title="修改习题信息" v-model="dialogFormVisible">
            <el-form :model="selectTable">
                <el-input type="textarea" :rows="2" placeholder="请输入习题题目" v-model="textarea">
                </el-input>
                <el-input type="textarea" :rows="2" placeholder="请输入习题答案" v-model="textarea" class="row">
                </el-input>
                <el-form-item label="习题题型" label-width="100px" class="xitixing">
                    <el-select v-model="selectTable.kind" placeholder="请选择题型">
                        <el-option label="选择题" value="1"></el-option>
                        <el-option label="填空题" value="2"></el-option>
                        <el-option label="判断题" value="3"></el-option>
                        <el-option label="简答题" value="4"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateShop">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import headTop from '../../components/headTop.vue'
import { quillEditor } from 'vue-quill-editor'

export default {
    data() {
        return {
            // 搜索框的值
            courseType: {
                input: '',
                text: '',
                value: [],
                options: [{
                    value: 'qiandaun',
                    label: '前端',
                    children: [{
                        value: 'html',
                        label: 'html',
                        children: [{
                            value: '1',
                            label: '第一章'
                        }, {
                            value: '2',
                            label: '第二章'
                        }, {
                            value: '3',
                            label: '第三章'
                        }]
                    }, {
                        value: 'css',
                        label: 'css',
                        children: [{
                            value: '1',
                            label: '第一章'
                        }, {
                            value: '2',
                            label: '第二章'
                        }, {
                            value: '3',
                            label: '第三章'
                        }]
                    }, {
                        value: 'js',
                        label: 'js',
                        children: [{
                            value: '1',
                            label: '第一章'
                        }, {
                            value: '2',
                            label: '第二章'
                        }, {
                            value: '3',
                            label: '第三章'
                        }]
                    }]
                }, {
                    value: 'houdaun',
                    label: '后端',
                    children: [{
                        value: 'html',
                        label: 'html',
                        children: [{
                            value: '1',
                            label: '第一章'
                        }, {
                            value: '2',
                            label: '第二章'
                        }, {
                            value: '3',
                            label: '第三章'
                        }]
                    }, {
                        value: 'css',
                        label: 'css',
                        children: [{
                            value: '1',
                            label: '第一章'
                        }, {
                            value: '2',
                            label: '第二章'
                        }, {
                            value: '3',
                            label: '第三章'
                        }]
                    }, {
                        value: 'js',
                        label: 'js',
                        children: [{
                            value: '1',
                            label: '第一章'
                        }, {
                            value: '2',
                            label: '第二章'
                        }, {
                            value: '3',
                            label: '第三章'
                        }]
                    }]
                }, {
                    value: 'dashuju',
                    label: '大数据',
                    children: [{
                        value: 'java',
                        label: 'Java简介',
                        children: [{
                            value: '1',
                            label: '第一章'
                        }, {
                            value: '2',
                            label: '第二章'
                        }, {
                            value: '3',
                            label: '第三章'
                        }]
                    }, {
                        value: 'shuzu',
                        label: '数组',
                        children: [{
                            value: '1',
                            label: '第一章'
                        }, {
                            value: '2',
                            label: '第二章'
                        }, {
                            value: '3',
                            label: '第三章'
                        }]
                    }, {
                        value: 'duixaing',
                        label: '面向对象',
                        children: [{
                            value: '1',
                            label: '第一章'
                        }, {
                            value: '2',
                            label: '第二章'
                        }, {
                            value: '3',
                            label: '第三章'
                        }]
                    }]
                }],
            },
            // 习题列表的值
            tableData: [{
                name: '下列html_tag中属于块级元素(block_element)有()?A、span;B、ol;C、img;D、ul',
                kind: '选择题',
                data: 'css',
                lei: '前端',
                answer: 'BD',
                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                srcList: [
                    'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
                    'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
                ]
            }, {
                name: '用来输入密码的表单域是____。',
                kind: '填空题',
                data: 'html',
                lei: '后端',
                answer: 'Type=password',
                img: '',
            }, {
                name: '什么是 HTML？',
                kind: '简答题',
                data: 'js',
                lei: '前端',
                answer: 'HTML（Hypertext Markup Language）是一种标记语言，用于创建和表示网页上的文本、图像和其他元素',
                img: '',
            }, {
                name: '<hr/>为单标记，用于定义一条水平线',
                kind: '判断题',
                data: 'java',
                lei: '后端',
                answer: '√',
                img: '',
            }],
            dialogFormVisible: false,
            selectTable: {},
            textanswer: false,
            currentTextanswer: "",
            textarea: "",
            props: {},
            editorOption: {
            },
        }
    },
    components: {
        headTop,
        quillEditor,
    },
    methods: {
        openTextanswer(row) {
            this.textanswer = true;
            this.currentTextanswer = row;
        },
        onSubmit() {
            console.log('submit!');
        },
        open() {
            this.dialogFormVisible = true
        },
        updateShop() {
            this.$message({
                message: '修改习题信息成功',
                type: 'success',
            });
            this.dialogFormVisible = false
        },
        addtext() {
            // 跳转到添加习题
            this.$router.push({ path: 'addtext' });
        },
        handleDelete() {
            this.$confirm('此操作将永久删除该小题, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

    }
}
</script>
<style>
.demo {
    width: 900px;
    margin: 30px auto;
}

/* 所有的文本居中 */
.cell {
    text-align: center;
}

/* 把题目的那个div文版向左 */
.name-wrapper {
    text-align: left;

}

/* 题目里的span标签 */
.el-tag {
    background-color: white;
    color: black;
}

.demo {
    width: 1200px;
    /* height: 50px; */
    margin-top: 60px;
}

.table {
    padding-top: 15px;
    height: 460px;
}

.el-form-item__label {
    font-size: 16px;
}

/* 查询的按钮 */
.select {
    width: 50px;
    margin-left: 30px;
}


/* 所有的表单 */
.el-dialog {
    width: auto;
    text-align: center;
}

.el-dialog__body {
    padding: 40px 80px;
}

.el-dialog__footer {
    text-align: center;
}

.el-cascader-menu__item {
    color: black;
    background-color: aliceblue;
}

.input {
    width: 180px;
}

.demonstration {
    margin-right: 10px;
    margin-left: 10px;
}


.el-cascader-menu {
    height: 120px;
}

/* 按钮 */
.button {
    float: right;
    margin-right: 30px;
}

/* 分页查询 */
.el-pagination {
    width: 300px;
    margin: 10px auto;
}

.el-form-item__label {
    margin-left: -24px;
}

.tixing {
    margin-left: 40px;
}

.xitixing {
    margin-top: 20px;
}

.el-dialog__body {
    padding: 30px 50px;
}

.row {
    margin-top: 20px;
}

.el-dialog__body {
    text-align: left;
}

.edit_container1{
    width: 1120px;
}
</style>